<template>
    <div class="policy-container">
        <el-row>
            <el-col :span="24">
                <normal-filter :filterProps="filterProps" />
            </el-col>
        </el-row>
        <!-- <el-row v-if="$getUserInfo().sysUser.type === 1">
      <el-button type="primary" icon="el-icon-plus" @click="addContent"
        >添加用户</el-button
      >
    </el-row> -->
        <el-row class="table-container">
            <Table
                :columnProps="columnProps"
                :tableData="tableData"
                :showHandle="true"
                :pagination="pagination"
                :hideModifyBtn="true"
                :hideDeleteBtn="true"
                @currentPage="goCurrent"
                @delete="del"
                @sizeChange="sizeChange"
            >
                <template slot-scope="scopes" slot="link">
                    <!-- <el-popconfirm title="密码将会被重置为123456，是否确认操作？" @confirm="resetPsw(scopes.scope.row)">
            <span style="margin-left: 20px">
              <el-link
                type="warning"
                :underline="false"
              >
                重置密码
              </el-link>
            </span>
          </el-popconfirm> -->
                    <el-popover placement="top" width="200" trigger="click" v-model="popVisibleArr[scopes.scope.$index]" v-if="$getUserInfo().sysUser.type === 1">
                        <div>
                            <i class="el-icon-warning" style="color: #e6a23c"></i>
                            <span>密码将会被重置为123456，是否确认操作？</span>
                        </div>
                        <div style="text-align: right; margin-top: 20px">
                            <el-button size="mini" @click="setPopVisible(scopes.scope.$index)">取消</el-button>
                            <el-button type="primary" size="mini" @click="resetPsw(scopes.scope.$index, scopes.scope.row)">确定</el-button>
                        </div>
                        <span slot="reference" style="margin-left: 20px">
                            <el-link type="primary" :underline="false" v-if="scopes.scope.row.type !== 3"> 重置密码 </el-link>
                        </span>
                    </el-popover>

                    <span style="margin-left: 20px" v-if="$getUserInfo().sysUser.type === 1">
                        <el-link @click="modify(scopes.scope.row)" type="warning" :underline="false"> 编辑 </el-link>
                    </span>
                </template>
            </Table>
        </el-row>
    </div>
</template>

<script>
    import normalFilter from "@/components/NormalFilter";
    import Table from "@/components/Table";
    import { getList, delItem, resetPsw } from "@/api/user";
    import { pagination, page, UserInfo } from "@/utils/enumConfig";
    import { Message } from "element-ui";

    export default {
        name: "User",
        components: {
            normalFilter,
            Table,
        },
        data() {
            const filterProps = {
                filterItems: [
                    {
                        type: "select",
                        id: "platform",
                        defaultValue:'h5',
                        title: "平台",
                        placeholder: "请选择",
                        width: 180,
                        options: [
                            {
                                title: "H5(含后台用户)",
                                key: "1",
                                value: "h5",
                            },
                            {
                                title: "小程序",
                                key: "2",
                                value: "ma",
                            },
                        ],
                    },
                    {
                        type: "input",
                        id: "name",
                        title: "姓名",
                        placeholder: "请输入",
                        width: 200,
                    },
                    {
                        type: "input",
                        id: "nickname",
                        title: "微信昵称",
                        placeholder: "请输入",
                    },
                    {
                        type: "input",
                        id: "phone",
                        title: "手机号",
                        placeholder: "请输入",
                        width: 200,
                    },
                    {
                        type: "select",
                        id: "type",
                        title: "用户类型",
                        placeholder: "请选择",
                        width: 180,
                        options: [
                            {
                                title: "管理员",
                                key: "1",
                                value: "1",
                            },
                            {
                                title: "员工",
                                key: "2",
                                value: "2",
                            },
                            {
                                title: "客户",
                                key: "3",
                                value: "3",
                            },
                        ],
                    },
                    {
                        type: "date",
                        title: "创建时间",
                    },
                ],
                onFilterChange: (value) => {
                    this.filterParam = value;
                    this.getList({
                        ...value,
                        ...page,
                    });
                },
            };
            const columnProps = [
                {
                    title: "姓名",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "微信头像",
                    dataIndex: "headImgUrl",
                    key: "headImgUrl",
                    width: 100,
                    render: (record) => {
                        return `<img style="width:50px;height:50px;" src="${record.headImgUrl}"></img>`;
                    },
                },
                {
                    title: "微信昵称",
                    dataIndex: "nickname",
                    key: "nickname",
                },
                {
                    title: "性别",
                    dataIndex: "sex",
                    key: "sex",
                    width: 100,
                    render: (record) => {
                        return `<span>${record.sex === 1 ? "男" : "女"}</span>`;
                    },
                },
                {
                    title: "年龄",
                    dataIndex: "age",
                    key: "age",
                    width: 100,
                },
                {
                    title: "手机号",
                    dataIndex: "phone",
                    key: "phone",
                    width: 200,
                },
                {
                    title: "用户类型",
                    dataIndex: "type",
                    key: "type",
                    width: 150,
                    render: (record) => {
                        return `<span>${UserInfo[record.type]}</span>`;
                    },
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    key: "createTime",
                    width: 200,
                },
            ];
            return {
                filterProps,
                columnProps,
                list: [],
                tableData: [],
                pagination: this.$_.cloneDeep(pagination),
                filterParam: null,
                popVisibleArr: [],
            };
        },
        async created() {
            let { pageIndex } = this.pagination;
            let param = {
                current: pageIndex,
            };
            this.getList(param);
        },
        methods: {
            addContent() {
                this.$router.push("/user/add");
            },
            sizeChange(size) {
                let param = {
                    ...this.filterParam,
                    current: 1,
                    size,
                };
                this.$set(this.pagination, "pageSize", size);
                this.getList(param);
            },
            goCurrent(currentIndex) {
                console.log(currentIndex);
                let { pageSize, pageIndex } = this.pagination;
                let param = {
                    ...this.filterParam,
                    current: currentIndex,
                    size: pageSize,
                };
                this.getList(param);
            },
            modify({ id }) {
                this.$router.push({ path: `/user/update/${id}` });
            },
            async del({ id }) {
                let res = await delItem({ id });
                if (res.code === 1) {
                    let { pageIndex } = this.pagination;
                    this.getList({
                        ...this.filterParam,
                        current: 1,
                    });
                }
            },
            async getList(param) {
                let { records, size, total, current } = await getList(param),
                    page = this.pagination;
                this.pagination = {
                    ...page,
                    totalElements: total,
                    pageIndex: current,
                };
                this.tableData = records;
            },
            async resetPsw(index, { id }) {
                let res = await resetPsw({ id });
                if (res?.code === 1) {
                    Message({
                        message: "密码重置成功",
                        type: "success",
                        duration: 1 * 1000,
                    });
                    this.setPopVisible(index);
                }
            },
            /**
             *设置删除框的显隐
             */
            setPopVisible(rowIndex) {
                let _this = this;
                _this.popVisibleArr.forEach((item, index) => {
                    index == rowIndex ? _this.$set(_this.popVisibleArr, rowIndex, !_this.popVisibleArr[rowIndex]) : _this.$set(_this.popVisibleArr, index, false);
                });
            },
        },
        watch: {
            list(newArr, oldArr) {
                newArr.forEach((item) => [this.popVisibleArr.push(false)]);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .policy-container {
        width: 100%;
        height: 100%;
        padding: 20px;
        .table-container {
            margin-top: 20px;
        }
    }
</style>
